<!DOCTYPE html>
<html>
<head>
  <title>HappyGUI</title>
  <link rel="stylesheet" type="text/css" href="css/default.css" />
  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
</head>
<body class="globalpreview">
<div class="wrapper">
  <div id="preview">
    <!-- elements drawn by the user -->
  </div>
</div>
<script type="text/javascript" src="/socket.io/socket.io.js"></script>
<script type="text/javascript" src="/build/build.js"></script>
<script type="text/javascript">
  var Raphael = require('richthegeek-raphael');
  var ElementFactory = require('happygui-elementfactory');
  var paper = Raphael(document.getElementById('preview'), 480, 600);
  var socket = io.connect('http://happygui.azurewebsites.net');
  var collection = {elements:[]};
  socket.on('gotCollection', function(data) {
    collection = data;
    console.log("Receiving", data);

    collection = ElementFactory.decorateCollection(collection);

    paper.clear();
    if (collection.elements.length > 0)
      collection.elements.forEach(function(element, i) {
        // TODO write something here
        collection.elements[i].drawing = element.draw(false, paper);
      });

  });
  socket.on('updatedPosElement', function(element, x, y) {
    console.log("Receiving", element, x, y);
    collection.elements[element].x = x;
    collection.elements[element].y = y;
    collection.elements[element].redraw(true);
  });
  socket.on('updatedElement', function(element, key, value) {
    console.log("Receiving", element, key, value);
    collection.elements[element][key] = value;
    collection.elements[element].redraw();
  });
  socket.on('createdElement', function(data) {
    console.log("Receiving", data);
    var element = ElementFactory.create(data);
    element.draw(true, paper);
    collection.elements.push(element);
  });
  socket.on('deletedElement', function(data) {
    console.log("Receiving", data);
    collection.elements.splice(data, 1);
  });

</script>

</body>
</html>